<template>
    <div>
        登录页面

        <div>
            <input type="text" placeholder="输入手机号">
            <button @click="getVdtCode">获取验证码</button>
        </div>
        <router-link to="/register">用户注册？</router-link>
        <button @click="loginEvt">登录</button>
    </div>
</template> 

<script>
    // import axios from 'axios'
    // import ajaxFunc from '../../apis/Ajax'

    // 单个接口引入
    import { getVdtCodeApi } from '../../apis/loginApi'
 
    export default {
        created() {
            console.log(this.$route)
        },

        methods: {
            loginEvt() {
                // 缓存用户登录标识，然后再进行页面跳转
                // 因为是读取vuex，所以必须使用vuex缓存
                // sessionStorage.setItem('token', 'token')
                this.$store.commit('common/setToken', 'token')
                // TypeError: Cannot read properties of undefined (reading 'push')
                // this.$store.push('/home')
                this.$router.push('/home')
            },

            // 获取验证码的方法
            async getVdtCode() {
                // 要发起ajax请求 -- 所以需要引入axios库
                // 获取验证码的url地址为：http://www.shuiyue.info:12600/user/app/code
                // 发送一个get请求
                // get(url: string, config?: AxiosRequestConfig): Promise
                // 第一个：url地址
                // 第二个：Axios Request Config axios的请求配置对象
                // {
                //     url?: string;
                //     method?: Method;
                //     baseURL?: string;
                //     headers?: AxiosRequestHeaders;
                //     params?: any;
                //     data?: D;
                //     timeout?: number;
                // }
                // 这个方法会返回一个Promise对象
                // Access to XMLHttpRequest at 'http://www.shuiyue.info:12600/user/app/code?phone=13691715060' from origin 'http://localhost:16666' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
                // 跨域问题？
                // 为什么要跨域？为了保护本网站的信息不被其它网站使用，为了数据安全
                // 什么会引起跨域？协议(http/https)、域名(域名和IP)、端口三个必须一致才不会跨域，只有浏览器才有跨域问题
                // 解决跨域的方式有哪些？jsonp现在几乎不用、服务器代理、后端CROS配置
                // axios.get('/user/app/code', {
                //     // 是请求的基础地址
                //     // baseURL: 'http://www.shuiyue.info:12600',
                //     // 所有的请求都加上一个/apis，然后服务器会把它进行一个代理
                //     baseURL: '/apis', // 这个请求地址长什么样子？http://localhost:16666/apis/user/app/code
                //     // 请求头
                //     headers: {token: 'test token'},
                //     // 超时配置 -- 设置请求的最大时长
                //     timeout: 5000,
                //     // params参数配置 -- 它的参数会自动拼接到url地址上
                //     params: {phone: '13691715060'},
                //     // data参数 -- 不能再get请求中使用，它是请求体参数
                //     data: {id: 'test', name: 'test'}
                // }).then(data => {
                // 可以支持所有类型的请求
                // request(config: AxiosRequestConfig<any>): Promise
                // 这个方法只接收一个配置对象
                // axios.request({
                //     // 设置请求地址
                //     url: '/user/app/code',
                //     method: 'GET',
                //     // 是请求的基础地址
                //     // baseURL: 'http://www.shuiyue.info:12600',
                //     // 所有的请求都加上一个/apis，然后服务器会把它进行一个代理
                //     baseURL: '/apis', // 这个请求地址长什么样子？http://localhost:16666/apis/user/app/code
                //     // 请求头
                //     headers: {token: 'test token'},
                //     // 超时配置 -- 设置请求的最大时长
                //     timeout: 5000,
                //     // params参数配置 -- 它的参数会自动拼接到url地址上
                //     params: {phone: '13691715060'},
                //     // data参数 -- 不能再get请求中使用，它是请求体参数
                //     data: {id: 'test', name: 'test'}
                // // }).then(data => {
                //     // 请求返回的是一个response对象，希望得到数据
                //     // console.log(data.data)
                // }).then( ({ data }) => {
                //     // 可以对response对象进行解构取值
                //     console.log(data)
                // }).catch(e => {
                //     console.log('----------------- 请求失败')
                //     console.log(e)
                // })

                // 使用同步代码 ajaxFunc 这个方法只能是一个只有resolve的Promise
                // let result = await this.ajaxFunc({url: '/user/app/code', params: {phone: '13691715060'}})
                // console.log(result)

                // 这个接口可能其它页面也会使用，所以应该把这个url地址也定义出去
                // let result = await ajaxFunc({url: '/user/app/code', params: {phone: '13691715060'}})
                let result = await getVdtCodeApi('13691715060')
                console.log(result)
            },

            // // 封装一个ajax请求方法
            // ajaxFunc(req) {
            //     return new Promise(resolve => {

            //         // 把动态数据 url、method、params、data 抽取出来
            //         axios.request({
            //             // 设置请求地址
            //             url: req.url,
            //             method: req.method || 'GET',
            //             // 是请求的基础地址
            //             // baseURL: 'http://www.shuiyue.info:12600',
            //             // 所有的请求都加上一个/apis，然后服务器会把它进行一个代理
            //             baseURL: '/apis', // 这个请求地址长什么样子？http://localhost:16666/apis/user/app/code
            //             // 请求头
            //             headers: {token: 'test token'},
            //             // 超时配置 -- 设置请求的最大时长
            //             timeout: 5000,
            //             // params参数配置 -- 它的参数会自动拼接到url地址上
            //             params: req.params || {},
            //             // data参数 -- 不能再get请求中使用，它是请求体参数
            //             data: req.data || {}
            //         // }).then(data => {
            //             // 请求返回的是一个response对象，希望得到数据
            //             // console.log(data.data)
            //         }).then( ({ data }) => {
            //             // 可以对response对象进行解构取值
            //             // 返回数据
            //             resolve(data)
            //         }).catch(e => {
            //             console.log('----------------- 请求失败')
            //             resolve(e)
            //         })
            //     })
            // }
        }
    }
</script>